<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 样式代码初始化 */
        *{
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
                             'Microsoft YaHei', Arial, 'sans-serif';
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: inherit;
        }
        /* 代码主体 */
        .box{
            width: 364px;
            height: 420px;
            border: 1px solid #B1B3B6;
            /* 外边距--块元素水平居中 */
            margin: 99px auto 0;
        }
        /* 上-标题 */
        .box h1{
            height: 50px;
            /* background: red; */
            border-bottom: 1px solid #B1B3B6;
            font-size: 24px;
            font-weight: normal;
            /* 单行文本的垂直居中 */
            line-height: 50px;
            padding-left: 20px;
        }
        /* .下-主体内容 */
        .content{
            height: 369px;
            /* background: lawngreen; */
        }
        /* 图片 */
        .content img{
            width: 324px;
            height: 169px;
            display: block;
            margin: 24px auto 15px;
        }
        /* 列表 */
        .content ol{
            width: 324px;
            margin: auto;
            /* 字体可继承性--注意：a标签不继承，因为自带字体色，会覆盖 */
            color: #313131;
        }
        .content ol li{
            height: 34px;
            border-bottom: 1px solid #D8D8D8;
            /* 单行文本垂直居中 */
            line-height: 34px;
        }
        /* 去除最后一项li的下边框--选择器 */
        .content ol li:last-child{
            /* border-bottom: none; */
            /* 边框：粗细、样式、颜色 */
            border-bottom-width: 0px;
        }
        .content ol li span{
            margin-right: 4px;
        }
        /* 选择器 */
        .content ol li:nth-of-type(1) span{color: #FE2D46;}
        .content ol li:nth-of-type(2) span{color: #FF6600;}
        .content ol li:nth-of-type(3) span{color: #FAA90E;}
        .content ol li:nth-of-type(4) span{color: #313131;}
        /* 热标识 */
        .content ol li:first-child b{
            font-size: 12px;
            font-weight: normal;
            color: #fff;
            width: 16px;
            height: 16px;
            display: inline-block;
            background: #FF6600;
            line-height: 16px;
            border-radius: 4px;
            text-align: center;
            vertical-align: text-bottom;
            margin-left: 4px;
        }
    </style>
</head>
<body>
    <!-- 容器盒子 -->
    <div class="box">
        <!-- 上-标题 -->
        <h1>探索宇宙</h1>
        <!-- 下-主体内容 -->
        <div class="content">
            <!-- 图片 -->
            <img src="./imgs/bj.jpg" alt="">
            <!-- 列表 -->
            <ol>
                <li>
                    <a href="">
                        <span>1</span>宇宙话题，引发对生命的终极哲思<b>热</b>
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>2</span>宇宙的构成和统一场论的基本原理
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>3</span>如果月球消失了，会发生什么？
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>4</span>在我们的银河系中，最大的恒星称为Gun
                    </a>
                </li>
            </ol>
        </div>
    </div>
</body>
</html>